<template>
  <vue-modal
    @submitData="saveCategory"
    modalTitle="保存分类信息"
    modalName="saveCategoryModal"
    modalWidth="750"
    ref="saveCategoryModal">
    <div slot="content" class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="message-box">
          <h3 class="name-title">分类名称</h3>
          <span :class="showNameTip? 'name-tip show-tip': 'name-tip'">长度不超过7个字符</span>
          <p>*</p>
        </div>
        <el-input
          v-model="form.name"
          class="input-name"
          size="small"
          maxlength="7"
          @focus="focusInputName"
          @blur="blurInputName"></el-input>
        <div class="message-box">
          <h3 class="description-title">排序优先级</h3>
          <span :class="showSortTip? 'sort-tip show-tip': 'sort-tip'">请输入1~99的整数，数字越小，优先级越高</span>
        </div>
        <el-input
          v-model="form.sort"
          class="input-sort"
          size="small"
          maxlength="2"
          @focus="focusInputSort"
          @blur="blurInputSort"></el-input>
        <div class="message-box">
          <h3 class="description-title">分类简介</h3>
          <span :class="showDescriptionTip? 'description-tip show-tip': 'description-tip'">长度不超过60个字符</span>
        </div>
        <el-input
          type="textarea"
          v-model="form.desc"
          :rows="3"
          class="input-description"
          maxlength="60"
          @focus="focusInputDescription"
          @blur="blurInputDescription"
        ></el-input>
      </el-form>
    </div>
  </vue-modal>
</template>

<script>
  import VueModal from 'components/common/modal/VueModal';
  import {insertCategory, updateCategory} from "../../../network/viewsRequest/category";

  export default {
    name: "SaveCategoryTemplate",
    data() {
      return {
        form: {
          id: 0,
          name: '',
          sort: '',
          desc: ''
        },
        showNameTip: false,
        showSortTip: false,
        showDescriptionTip: false
      }
    },
    props: {
      categoryFromParent: {
        type: Object,
        default: {}
      }
    },
    watch: {
      categoryFromParent: {
        deep: true,
        handler(val) {
          this.form.id = val.id;
          /*
          由于在打开的时候form被清空，所以在赋值前form里面没有属性，这就导致了今后给form进行属性的新增时，新增的属性不是响应式的。
          使用$set方法将新增的属性变为响应式
           */
          this.form.name = this.$set(this.form, 'name', val.categoryName);
          this.form.sort = this.$set(this.form, 'sort', val.sort);
          this.form.desc = this.$set(this.form, 'desc', val.description);
        }
      }
    },
    components: {
      VueModal
    },
    methods: {
      /**
       * 打开本模态框对应的方法
       */
      show() {
        this.form = {};
        this.$refs.saveCategoryModal.show('saveCategoryModal');
      },
      /**
       * 当分类名称对应的输入框获得焦点时，显示相应的提示信息
       */
      focusInputName() {
        this.showNameTip = true;
      },
      /**
       * 当分类名称对应的失去框获得焦点时，隐藏相应的提示信息
       */
      blurInputName() {
        this.showNameTip = false;
      },
      /**
       * 当分类排序对应的输入框获得焦点时，显示相应的提示信息
       */
      focusInputSort() {
        this.showSortTip = true;
      },
      /**
       * 当分类排序对应的失去框获得焦点时，隐藏相应的提示信息
       */
      blurInputSort() {
        this.showSortTip = false;
      },
      /**
       * 当分类描述对应的输入框获得焦点时，显示相应的提示信息
       */
      focusInputDescription() {
        this.showDescriptionTip = true;
      },
      /**
       * 当分类描述对应的输入框失去焦点时，隐藏相应的提示信息
       */
      blurInputDescription() {
        this.showDescriptionTip = false;
      },
      /**
       * 用户点击了模态框上的`确定`按钮后调用的方法
       */
      saveCategory() {

        // 1.校验信息
        if (this.form.name == null || this.form.name.trim().length == 0) {
          this.message({
            type: 'error',
            message: '分类名称不能为空'
          });
          return;
        }

        // 2.选择操作方法
        let func = null;
        if(this.form.id != 0 &&this.form.id != undefined) {
          func = updateCategory;
        } else {
          func = insertCategory;
        }

        // 3.进行操作
        this.$confirm('确定要保存吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonClass: '取消',
          type: 'warning'
        }).then(() => {
          func(this.form).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '保存成功！'
              });
              // 关闭模态框
              this.$refs.saveCategoryModal.closeModal('saveCategoryModal');
              // 调用父组件的方法来刷新表格数据
              this.$emit("reloadTable");
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          });
        }).catch(() => {
          this.message({
            type: 'info',
            message: '保存操作已经被取消'
          })
        });

      }
    }
  }
</script>

<style scoped>
  .form-box {
    padding-left: 100px;
    position: relative;
  }
  .form-box p {
    position: absolute;
    top: 0px;
    left: 178px;
    color: #F56C6C;
  }
  .input-name,.input-description,.input-sort {
    width: 500px;
  }
  h3 {
    display: inline-block;
    margin-bottom: 10px;
  }
  .description-title {
    margin-top: 25px;
  }
  .name-tip,.description-tip,.sort-tip {
    margin-left: 20px;
    color: #F56C6C;
    visibility: hidden;
  }
  .message-box .show-tip {
    visibility: visible;
  }

  .input-description {
    margin-bottom: 10px;
  }

</style>